import React from 'react';

// 最简单的React组件测试
const SimpleTest = () => {
  console.log('SimpleTest组件开始渲染');
  
  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      fontFamily: 'Arial, sans-serif'
    }}>
      <div style={{
        background: 'white',
        padding: '40px',
        borderRadius: '12px',
        boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
        textAlign: 'center',
        maxWidth: '500px'
      }}>
        <h1 style={{ 
          color: '#1890ff', 
          marginBottom: '20px',
          fontSize: '28px'
        }}>
          🎉 React应用正常运行！
        </h1>
        
        <div style={{
          background: '#f6ffed',
          border: '1px solid #b7eb8f',
          borderRadius: '6px',
          padding: '15px',
          marginBottom: '20px',
          textAlign: 'left'
        }}>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ React 19.1.1 正常加载</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ JSX 语法正常编译</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ 组件渲染成功</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ CSS 样式正常应用</p>
          <p style={{ margin: '5px 0', color: '#52c41a' }}>✓ Vite 开发服务器正常</p>
        </div>
        
        <p style={{ color: '#666', marginBottom: '20px' }}>
          如果你能看到这个页面，说明React应用的基础功能都正常工作。
        </p>
        
        <div style={{ marginTop: '20px' }}>
          <button 
            onClick={() => {
              console.log('按钮点击事件触发');
              alert('事件处理正常！');
            }}
            style={{
              background: '#1890ff',
              color: 'white',
              border: 'none',
              padding: '12px 24px',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px',
              marginRight: '10px'
            }}
          >
            测试点击事件
          </button>
          
          <button 
            onClick={() => {
              window.location.href = '/console-debug.html';
            }}
            style={{
              background: '#52c41a',
              color: 'white',
              border: 'none',
              padding: '12px 24px',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px'
            }}
          >
            打开调试工具
          </button>
        </div>
      </div>
    </div>
  );
};

export default SimpleTest;